import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import './assets/global.scss'  // 导入全局样式
// 导入统一的主题系统
import './assets/theme.scss'
// 导入dayjs用于日期格式化
import dayjs from 'dayjs'
// 导入并注册全局指令
import directives from './directive'
// 配置axios
import request from './utils/request'
// 注册全局组件
import './components/components'


// 应用初始化器
const AppInitializer = {
  // 配置Vue的基础设置，包括ElementUI、指令和过滤器
  configureVue() {
    this.setupVueConfig()
    this.setupGlobalDirectives()
    this.setupGlobalFilters()
  },

  // 设置Vue的全局配置项和第三方库
  setupVueConfig() {
    Vue.config.productionTip = false
    Vue.config.silent = process.env.NODE_ENV === 'production'
    Vue.config.devtools = process.env.NODE_ENV !== 'production'
    
    // 全局错误处理
    Vue.config.errorHandler = (err, vm, info) => {
      console.error('Vue全局错误:', err, info)
      // 可以在这里添加错误上报逻辑
    }
    
    // 配置ElementUI和全局组件
    Vue.use(ElementUI, { size: 'medium' })
    Vue.use(directives)
    Vue.prototype.$http = request
  },

  // 注册全局权限指令，用于控制元素的显示权限
  setupGlobalDirectives() {
    Vue.directive('permission', {
      inserted(el, binding) {
        const { value } = binding
        const hasPermission = true // 模拟权限检查
        
        if (!hasPermission) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    })
  },

  // 注册全局过滤器，用于日期格式化
  setupGlobalFilters() {
    Vue.filter('dateFormat', (date, format = 'YYYY-MM-DD HH:mm:ss') => {
      if (!date) return ''
      return dayjs(date).format(format)
    })
  },

  // 检查并初始化用户路由权限
  initializeRoutes() {
    if (localStorage.getItem('Admin-Token')) {
      this.loadUserRoutes()
    }
  },

  // 异步加载用户权限路由
  loadUserRoutes() {
    store.dispatch('user/getInfo').then(userData => {
      const roles = userData.roles || ['admin']
      
      import('./router').then(({ asyncRoutes, constantRoutes }) => {
        store.dispatch('permission/generateRoutes', {
          roles,
          routes: asyncRoutes,
          constantRoutes: constantRoutes
        })
      })
    })
  },

  // 应用启动的主入口函数
  initializeApp() {
    this.configureVue()
    
    // 预加载字体
    const preloadLink = document.createElement('link')
    preloadLink.rel = 'preload'
    preloadLink.href = '/node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff'
    preloadLink.as = 'font'
    preloadLink.type = 'font/woff'
    preloadLink.crossOrigin = 'anonymous'
    document.head.appendChild(preloadLink)
    
    this.initializeRoutes()
    
    // 初始化CSS变量
    document.documentElement.style.setProperty('--bg-opacity', '0.85')
    document.documentElement.style.setProperty('--bg-blur', '10px')
    
    this.createVueInstance()
  },

  // 创建Vue实例并挂载应用
  createVueInstance() {
    new Vue({
      router,
      store,
      render: (h) => h(App),
      created() {
        // 初始化主题
        store.dispatch('theme/initTheme')
        
        // 设置背景图片
        const bgImage = localStorage.getItem('app-bg-image')
        if (bgImage) {
          setTimeout(() => {
            const appEl = document.getElementById('app')
            if (appEl) {
              appEl.classList.add('has-bg-image')
            }
          }, 100)
        }
      }
    }).$mount('#app')
  }
}

// 启动应用
AppInitializer.initializeApp()
